<template>
  <div class="header">
    <Row class="m-headerWap" style="padding: 45px 0 35px;">
      <Col :lg="12" :xs="{span:24}">
        <img src="../assets/images/index/logo.png" alt>
      </Col>
      <Col :lg="12" :xs="{span:24}" style="text-align:right">
        <Row style=" padding-top: 70px;height: 83px;">
          <Col :lg="{span:24}" :xs="{span:24}" class="YaHei fS18">
            <Icon type="ios-call" color="#f19fc3" size="18"/>客服热线：400-000-0001 |
            <Icon type="ios-call" color="#f19fc3" size="18"/>加盟热线：400-000-0002 | 免费预约试听
          </Col>
        </Row>
      </Col>
    </Row>
    <div class="mainnav">
      <Row>
        <Col :lg="24" :xs="{span:24}">
          <Menu mode="horizontal" :active-name="activeName">
            <MenuItem name="/index" to="/index">
              首页
              <i>|</i>
            </MenuItem>
            <MenuItem name="/t11" to="/t11">
              T11
              <i>|</i>
            </MenuItem>
            <MenuItem name="/specialty" to="/specialty">
              课程
              <i>|</i>
            </MenuItem>
            <MenuItem name="/tutor" to="/tutor">
              名师
              <i>|</i>
            </MenuItem>
            <MenuItem name="/recruit" to="/recruit">
              招生
              <i>|</i>
            </MenuItem>
            <MenuItem name="/activity" to="/activity">
              活动
              <i>|</i>
            </MenuItem>
            <MenuItem name="/consult" to="/consult">
              资讯
              <i>|</i>
            </MenuItem>
            <MenuItem name="/works" to="/works">
              作品
              <i>|</i>
            </MenuItem>
            <MenuItem name="/jion" to="/jion">
              加盟
              <i>|</i>
            </MenuItem>
            <MenuItem name="/relation" to="/relation">联系</MenuItem>
          </Menu>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: this.$route.path.split("/", 2).join("/")
    };
  }
};
</script>

<style lang="less">
@import "../assets/css/base.less";
.header {
  width: 100%;
  margin: auto;

  .mainnav {
    background: #f19fc3;

    .ivu-menu-horizontal.ivu-menu-light:after {
      height: 0px;
    }
    .ivu-row {
      width: 1200px;
      margin: auto;
      background: red;
    }

    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
      color: #e40082;
      border-bottom: 2px solid #e40082 !important;
    }
    .ivu-menu {
      background: #f19fc3;
      display: flex;
      justify-content: flex-end;
      flex-flow: nowrap;
      .ivu-menu-item {
        width: 112px;
        color: #fff;
        font-size: 21px;
        text-align: center;
        i {
          position: absolute;
          top: 0;
          right: 0;
          margin: 0;
        }
      }
    }
  }
}
</style>